<template>
  <div class="app">
    <el-container>
      <el-header>
        <div class="report_header" style="display: flex;justify-content: space-between;">
          <div style="display: flex;height:100%;align-items: center;">
            <div class="report_header_left"></div>
            <div class="report_header_date">
              <queryDate @queryDateClick='queryDateClick' :endDate="endDate" :beginDate="beginDate"></queryDate>
            </div>
            <!--<div class="report_header_query">-->
              <!--<queryOffice @queryOfficeClick="queryOfficeClick" :officeId="officeId"></queryOffice>-->
            <!--</div>-->
            <div class="report_header_query">
              <queryShop @queryShopClick='queryShopClick' :shopname="shopname"></queryShop>
            </div>
            <div class="report_header_query">
              <queryMember @queryMemberClick="queryMemberClick" :membername="membername"></queryMember>
            </div>
            <div class="report_header_query">
              <queryProduct @queryProductClick='queryProductClick' :proname="proname"></queryProduct>
            </div>
            <div class="report_header_query">
              <queryProductCategory @queryProductCategoryClick="queryProductCategoryClick"
                                    :productId="productId"></queryProductCategory>
            </div>
            <div class="report_header_query">
              <el-select v-model="query.groupBuyId" placeholder="请选择订单类型" clearable>
                <el-option label="拉新活动订单" value="4"/>
              </el-select>
            </div>


          </div>
          <div style="display: flex;">
            <el-button style="margin-left: 10px" size="small" type="primary" @click="loadOrder">查询</el-button>
            <ExportList2Excel ref="exportList2Excel" @handleExport="handleExport" name="导出"/>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table :span-method="totalLine" :height="curHeight" :data="tableData" border style="width: 100%;">
          <el-table-column type="index" align="center" label="序号" header-align="center" width="50">
            <template slot-scope="scope">{{ scope.$index == tableData.length - 1 ? '总计' : scope.$index + 1 }}</template>
          </el-table-column>
          <el-table-column prop="orderDate" width="100" align="center" header-align="center" label="销售日期">
          </el-table-column>
          <el-table-column prop="shopName" width="100" header-align="center" label="所属门店">
          </el-table-column>
          <el-table-column prop="memberName" width="150" header-align="center" label="客户名称">
          </el-table-column>
          <el-table-column prop="memberCode" width="60" header-align="center" label="客户编号">
          </el-table-column>
          <el-table-column prop="name" label="名称" header-align="center" :show-overflow-tooltip="true" width="200">
          </el-table-column>
          <el-table-column prop="spec" width="100" header-align="center" :show-overflow-tooltip="true" label="规格">
          </el-table-column>
          <el-table-column align="center" prop="unit" header-align="center" width="50" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="quantity" label="销售数量" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" width="80" header-align="center" label="销售单价">
            <template slot-scope="scope">{{ scope.row.price == null ? '' : scope.row.price }}</template>
          </el-table-column>
          <el-table-column align="right" prop="discount" label="店铺优惠" header-align="center" width="80">
          </el-table-column>
          <el-table-column align="right" prop="totalAmt" width="80" header-align="center" label="销售金额">
          </el-table-column>
          <el-table-column align="right" label="成本单价" header-align="center" width="80">
            <template slot-scope="scope">{{ scope.row.cost == null ? '' : scope.row.cost }}</template>
          </el-table-column>
          <el-table-column align="right" prop="totalCost" width="80" header-align="center" label="成本金额">
          </el-table-column>
          <el-table-column align="right" prop="maoli" width="80" header-align="center" label="毛利">
          </el-table-column>
          <el-table-column align="right" prop="maolilv" header-align="center" label="毛利率" width="80">
          </el-table-column>
          <el-table-column prop="orderSn" label="订单号" header-align="center" align="center" :show-overflow-tooltip="true"
                           width="150">
          </el-table-column>
          <el-table-column label="订单类型" header-align="center" :show-overflow-tooltip="true" width="80">
            <template slot-scope="scope">
              <el-tag v-if="scope.$index != tableData.length-1">{{ scope.row.orderType == 0 ? '出货单' : "退货单" }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" width="100" label="收货人">
            <template slot-scope="scope">
              <div>
              <span>
                     {{ scope.row.consignee ? scope.row.consignee : " " }}
              </span>
              </div>
            </template>

          </el-table-column>
          <el-table-column align="center" header-align="center" width="120" label="收货人电话">
            <template slot-scope="scope">
              <div>
              <span>
                     {{ scope.row.phone ? scope.row.phone : " " }}
              </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="address" header-align="center" width="250" label="收货人地址">
          </el-table-column>
          <el-table-column prop="createDate" width="180" align="center" header-align="center" label="制单日期">
          </el-table-column>
          <el-table-column align="center" label="查看详情" width="100">
            <template slot-scope="scope">
              <div class="justify_right shop_Height" @click="clicklookorder(scope.row)"
                   v-if="scope.$index != tableData.length-1">
                <a class="details_Title">查看订单</a>
              </div>
            </template>

          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <div class="report_footer_box">
          <pagination style="margin-left: 10px" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                      @pagination="loadOrder"></pagination>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import Pagination from '@/components/Pagination';
import ExportList2Excel from "@/components/ExportList2Excel";
import {
  orderSummary,
  productDetailList
} from '@/api/report'
import utils from '@/utils/utils'
import permission from '@/directive/permission'
//条件组件
import queryDate from '@/components/Query/queryDate'
import queryShop from '@/components/Query/queryShop'
import queryOffice from '@/components/Query/queryOffice'
import queryProduct from '@/components/Query/queryProduct'
import queryMember from '@/components/Query/queryMember'
import queryProductCategory from '@/components/Query/queryProductCategory'

export default {
  name: 'orderReport-detailslist',
  data() {
    return {
      printing: 5000,//打印数量设置
      query: {
        shopId: '',
        productCategoryId: '',
        officeId: '',
        endDate: '',
        beginDate: '',
        productId: '',
        memberId: '',
        groupBuyId:''
      },
      tableData: [],
      curHeight: null,
      pageSize: 20,
      pageSizetwo: 100,
      total: 0,
      pageNum: 1,
      summaryForm: {
        quantity: 0,
        discount: 0,
        totalCost: 0,
        maoli: 0,
        maolilv: 0,
        totalAmt: 0
      },
      productId: "",
      beginDate: "",
      endDate: "",
      officeId: "",
      shopname: "",
      opdertotal: ''


    }
  },
  directives: {
    elDragDialog
  },
  created() {
    if (this.$route.query.id == null) {
      this.query.productId = ""
    } else {
      this.query.productId = this.$route.query.id;
    }
    this.beginDate = this.$route.query.beginDate,
      this.endDate = this.$route.query.endDate,
      this.officeId = this.$route.query.officeId,
      this.shopname = this.$route.query.shopname,
      this.membername = this.$route.query.membername,
      this.proname = this.$route.query.proname
      this.productId = this.$route.query.productCategoryId
    var _this = this
    _this.loadOrder()

  },
  components: {
    Pagination,
    queryDate,
    queryShop,
    queryOffice,
    queryProduct,
    queryMember,
    queryProductCategory,
    ExportList2Excel
  },
  mounted() {
    this.comeIn();
    this.beforeMount();
  },
  methods: {
    clicklookorder(data) {
      console.log(data.orderId);
      if (data.orderType == 0) {
        this.$router.push({path: '/order/view', query: {id: data.orderId}})
      } else if (data.orderType == 1) {
        this.$router.push({path: '/askfor/view', query: {id: data.orderId}})
      }
    },
    queryDateClick(data) {
      this.query.beginDate = data.beginDate
      this.query.endDate = data.endDate
    },
    queryShopClick(data) {
      console.log(data)
      this.query.shopId = data.shopId

    },
    queryOfficeClick(data) {
      this.query.officeId = data.officeId
    },
    queryProductClick(data) {
      this.query.productId = data.productId

    },
    queryMemberClick(data) {
      this.query.memberId = data.memberId

    },
    queryProductCategoryClick(data) {
      this.query.productCategoryId = data.productCategoryId
    },
    beforeMount() {
      var _this = this
      window.onresize = () => {
        return (() => {
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          _this.curHeight = h - 224 //减去页面上固定高度height
        })();
      };
    },
    comeIn() {
      var h = document.documentElement.clientHeight || document.body.clientHeight;
      this.curHeight = h - 224 //减去页面上固定高度height
    },
    //下载模板的函数
    handleExport() {
      let _this = this
      var loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      //要导出函数携带的参数
      //要导出函数携带的参数
      let data = {}
      data.tHeader = ["销售日期", "所属门店", '客户名称', '客户编号', "名称", "规格", "单位", "销售数量", "销售单价", "店铺优惠", '销售金额', '成本单价', "成本金额", '毛利', '毛利率', "订单号", "订单类型", "收件人", "收件人电话", "收件人地址", '制单日期']
      data.filterVal = ['orderDate', 'shopName', "memberCode", 'memberCode', "name", "spec1", "unit", "quantity", "price", "discount", 'totalAmt', 'cost', "totalCost", 'maoli', 'maolilv', "orderSn", 'orderType', "consignee", "phone", "address", 'createDate']
      data.filename = "销售明细表";
      var params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.printing)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('officeId', this.query.officeId)
      params.append('shopId', this.query.shopId)
      params.append('productCategoryId', this.query.productCategoryId)
      params.append('productId', this.query.productId)
      params.append('memberId', this.query.memberId)
      params.append('groupBuyId', this.query.groupBuyId)
      params.append('managerId', this.$route.query.managerId)

        productDetailList(params).then(res => {
        res.data.data.forEach(item => {
          if (item.maolilv == null) {
            item.maolilv = 0
          }
          item.maolilv = item.maolilv + '%'
          if (item.orderType == 0) {
            item.orderType = '出货单'
          } else {
            item.orderType = '退货单'
          }
          if (item.orderDate != null) {
            item.orderDate = item.orderDate.split(" ")
            item.orderDate = item.orderDate[0]
          }
        })
        data.list = res.data.data
        orderSummary(params).then(response => {
          response.data[0].sn = '合计'
          if (response.data[0].maolilv == null) {
            response.data[0].maolilv = 0
          }
          response.data[0].maolilv = response.data[0].maolilv + '%'
          data.list.push(response.data[0])
          _this.$refs.exportList2Excel.handleDownload(data);
          loading.close();
        })
        if (data.list.length == this.printing) {
          this.pageNum++
          console.log(this.pageNum);
          this.handleExport()
        } else {
          return;
        }
      }).catch(error => {
        _this.$refs.exportList2Excel.unlockLoading()
        loading.close();
        console.log('error!!')
      })
    },
    loadOrder() {
      var _this = this
      console.log(this.query)
      const params = new URLSearchParams()
      params.append('pageNum', this.pageNum)
      params.append('pageSize', this.pageSize)
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('officeId', this.query.officeId)
      params.append('shopId', this.query.shopId)
      params.append('productCategoryId', this.query.productCategoryId)
      params.append('productId', this.query.productId)
      params.append('memberId', this.query.memberId)
      params.append('groupBuyId', this.query.groupBuyId)
      params.append('managerId', this.$route.query.managerId)

        productDetailList(params).then(response => {
        response.data.data.forEach(item => {
          if (item.maolilv == null) {
            item.maolilv = 0
          }
          item.maolilv = item.maolilv + '%'
          if (item.orderDate != null) {
            item.orderDate = item.orderDate.split(" ")
            item.orderDate = item.orderDate[0]
          }
        })
        _this.tableData = response.data.data
        _this.total = response.data.total
        this.summaryClick()
        //_this.tableData.push(_this.summaryForm)
        console.log(_this.summaryForm);
      }).catch(error => {
      })
    },
    summaryClick() {
      console.log(this.productId);
      console.log(this.query)
      var _this = this
      const params = new URLSearchParams()
      params.append('startDate', this.query.beginDate)
      params.append('endDate', this.query.endDate)
      params.append('officeId', this.query.officeId)
      params.append('shopId', this.query.shopId)
      params.append('productCategoryId', this.query.productCategoryId)
      params.append('productId', this.query.productId)
      params.append('memberId', this.query.memberId)
      params.append('groupBuyId', this.query.groupBuyId)
      params.append('managerId', this.$route.query.managerId)
        orderSummary(params).then(response => {
        if (response.data[0].maolilv == null) {
          response.data[0].maolilv = 0
        }
        response.data[0].maolilv = response.data[0].maolilv + '%'
        // _this.summaryForm = response.data[0]
        // _this.loadOrder()
        if (response.data[0] != null && response.data.length > 0) {
          _this.tableData.push(response.data[0])
        }


      }).catch(error => {
      })
    },
    totalLine({
                row,
                column,
                rowIndex,
                columnIndex
              }) {
      var _this = this
      if (rowIndex === _this.tableData.length - 1) {
        if (columnIndex === 0) {
          return {
            rowspan: 1,
            colspan: 5
          };
        } else if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4) {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
  }
}
</script>

<style scoped>
.details_Title {
  font-size: 14px;
  color: #409EFF;
}

.justify_right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.report_header {
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  background-color: white;
  display: flex;
  align-items: center;
}


.report_header_left {
  width: 5px;
  height: 100%;
  background-color: #409EFF;
}

.report_header_date {
  box-sizing: border-box;
  margin-left: 10px;
  width: 260px;
}

.report_header_query {
  margin-left: 10px;
  width: 130px;
}


.report_footer_box {
  width: 100%;
  border: 1px solid #dfe6ec;
  border-top: none;
  height: 60px;
  display: flex;
  align-items: center;
  background-color: white;
}

/deep/ .el-footer {
  padding: 10px;
  padding-top: 0;
}

.report_footer_box_title {
  margin-left: 10px;
  font-size: 12px;
  font-weight: bold;
}

.elOption {
  background-color: #909399;
  color: white;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 40px
}


.app {
  background-color: rgba(248, 248, 248, 0.8);
}

/deep/ .el-table--group::after,
.el-table--border::after,
.el-table::before {
  background-color: white;
}

/deep/ .el-table__body tbody .el-table__row:last-child {
  background-color: #F5F7FA;
}

/deep/ .el-main {
  padding: 10px;
  padding-bottom: 0;
}

/deep/ .el-table--enable-row-transition .el-table__body td {
  border-bottom: none;
}

/deep/ .el-table::before {
  height: 0px;
}

/deep/ .el-table--border th {
  background-color: rgba(241, 242, 243, 1);
}

/deep/ .el-header {
  padding: 10px;
}

/deep/ .pagination-container {
  margin-top: 0 !important;
}
</style>
